<template>
  <div class="container">
    <div class="userinfo">
      <div class="userinfo-avatar">
        <open-data type="userAvatarUrl"></open-data>
      </div>
      <div class="userinfo-name">
        <open-data type="userNickName"></open-data>
      </div>
    </div>
    <div class="binding-phone">
      <span class="show-tip">绑定手机号后可查看订单和领取优惠券，</span>
      <span class="gotobinding" @click="gotobinding_phone">去绑定</span>
    </div>
    <div class="list-cont">
      <div class="total-order">
        <div class="order-tit">
          <span style="font-weight: bold">我的订单</span>
          <div class="checkmore">
            <span>查看全部</span>
            <span class="arrowhead"></span>
          </div>
        </div>
        <div class="procedure">
          <div class="item" data-sts="1">
            <image src="../../static/images/icon/toPay.png" role="img"></image>
            <span>待支付</span>
          </div>
          <div class="item" data-sts="2">
            <image src="../../static/images/icon/toDelivery.png" role="img"></image>
            <span>待发货</span>
          </div>
          <div class="item" data-sts="3">
            <image src="../../static/images/icon/toTake.png" role="img"></image>
            <span>待收货</span>
          </div>
          <div class="item" data-sts="4">
            <image src="../../static/images/icon/toComment.png" role="img"></image>
            <span>已完成</span>
          </div>
        </div>
      </div>
      <div class="prod-col">
        <div class="col-item">
          <div class="num">0</div>
          <div class="tit">我的收藏</div>
        </div>
        <div class="col-item">
          <div class="num">5</div>
          <div class="tit">我的消息</div>
        </div>
        <div class="col-item">
          <div class="num">3</div>
          <div class="tit">我的足迹</div>
        </div>
        <div class="col-item">
          <div class="num">0</div>
          <div class="tit">我的积分</div>
        </div>
      </div>
      <div @click="address">收货地址</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello",
    };
  },
  onLoad() {},
  methods: {
    gotobinding_phone() {
      uni.navigateTo({
        url: "/pages/binding-phone/index",
      });
    },
    address() {
      console.log(123321);
      uni.navigateTo({
        url: '/pages/delivery-address/index'
      });
    },
  },
};
</script>

<style scoped>
span {
  cursor: text;
}
.container {
  height: 100%;
  box-sizing: border-box;
  color: #333;
  font-family: helvetica, "Heiti SC", PingFangSC-Light;
}
.userinfo {
  position: relative;
  width: 100%;
  background: #fff;
  text-align: center;
  padding: 30rpx 0;
}
.userinfo .userinfo-avatar {
  overflow: hidden;
  display: block;
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
  margin: auto;
}
.userinfo .userinfo-name {
  font-size: 30rpx;
  font-weight: bold;
  margin-top: 20rpx;
}
.binding-phone {
  position: relative;
  background: #fff;
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 30rpx;
  border-top: 2rpx solid #f7f7f7;
  border-bottom: 2rpx solid #f7f7f7;
}
.binding-phone .show-tip {
  font-size: 26rpx;
}
.binding-phone .gotobinding {
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #e24b4b;
  font-weight: bold;
}
.list-cont {
  width: 100%;
  background: #f7f7f7;
  margin-top: 20rpx;
}
.list-cont .total-order {
  background: #fff;
}
.prod-col {
  margin-top: 20rpx;
  background: #fff;
  display: flex;
  justify-content: space-around;
  padding: 30rpx 0 10rpx 0;
  font-size: 12px;
}
.list-cont .total-order .order-tit {
  display: flex;
  justify-content: space-between;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 30rpx;
  border-bottom: 1px solid #f7f7f7;
  padding: 0 30rpx;
}
.list-cont .total-order .order-tit .checkmore {
  font-size: 22rpx;
  color: #80848f;
  display: flex;
  align-items: center;
}
.arrowhead {
  width: 15rpx;
  height: 15rpx;
  border-top: 2rpx solid #999;
  border-right: 2rpx solid #999;
  transform: rotate(45deg);
  margin-left: 10rpx;
}
.list-cont .total-order .procedure {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 25rpx;
  height: 160rpx;
}
.list-cont .total-order .procedure .item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.list-cont .total-order .procedure .item image {
  width: 70rpx;
  height: 70rpx;
  margin-bottom: 20rpx;
}
.prod-col {
  margin-top: 20rpx;
  background: #fff;
  display: flex;
  justify-content: space-around;
  padding: 30rpx 0 10rpx 0;
  font-size: 12px;
}
.prod-col .col-item {
  text-align: center;
}

.prod-col .col-item .num {
  font-size: 24px;
  font-weight: 700;
  color: #3a86b9;
}
.prod-col .col-item .tit {
  line-height: 34px;
}
</style>
.menu-address {
  font-size: 28rpx;
}
</style>
